<template>
  <div>
    <svg-icon icon-class="hamburger" class-name="hamburger" @click="toggleClick" :class="{'is-active':isActive}"></svg-icon>
  </div>
</template>

<script>
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.hamburger
  display inline-block
  cursor pointer
  width 20px
  height 20px
  transform rotate(90deg)
  transition 0.38s
  transform-origin 50% 50%
.hamburger.is-active
  transform rotate(0deg)
</style>
